<template>
    <!--登录配置项编辑-->
    <view class="AddLoginConfigPopup">
        <u-toast ref="uToast"></u-toast>
        <u-popup :show="isPopup" :round="15" mode="bottom" @close="isPopup = false" safe-area-inset-bottom>
            <view class="title">兑换奖品</view>
            <view class="content f_1 scroll-y">
                <view v-if="awardWay == 1">
                    <view class="borderBottom flex between item">
                        <view class="item-title">
                            <label>*</label>
                            <text>收件人</text>
                        </view>
                        <u--input placeholder="请输入姓名" border="none" v-model="form.recipient"
                            inputAlign="right"></u--input>
                    </view>
                    <view class="borderBottom flex between item">
                        <view class="item-title">
                            <label>*</label>
                            <text>联系电话</text>
                        </view>
                        <u--input placeholder="请输入电话" border="none" v-model="form.recipientPhone"
                            inputAlign="right"></u--input>
                    </view>
                    <view class="borderBottom flex between item" @click="visible = true">
                        <view class="item-title">
                            <label>*</label>
                            <text>所在地区</text>
                        </view>
                        <u--input placeholder="省、市、区" border="none" v-model="form.recipientArea" inputAlign="right"
                            disabled disabledColor="#fff"></u--input>
                    </view>
                    <view class="borderBottom flex between item">
                        <view class="item-title">
                            <label>*</label>
                            <text>详细地址</text>
                        </view>
                        <u--input placeholder="小区、写字楼、门牌号等" border="none" v-model="form.recipientStreet"
                            inputAlign="right"></u--input>
                    </view>
                    <view class="line"></view>
                </view>
                <view class="borderBottom flex between item">
                    <u--input placeholder="输入手机号" border="none" v-model="phone" clearable></u--input>
                </view>
                <view class="borderBottom flex between item">
                    <u--input placeholder="输入验证码" border="none" v-model="code" clearable></u--input>
                    <view class="item-code" v-if="isShowGetCode" @click="onGetCode">获取验证码</view>
                    <u-count-down v-else ref="countDown" :time="30 * 1000" format="ss" millisecond
                        @finish="isShowGetCode = true" @change="timeData = $event">
                        <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
                    </u-count-down>
                </view>
            </view>
            <view class="footer fs_0">
                <view class="confirm btn" @click="confirm">确定</view>
                <view class="line"></view>
                <view class="close btn" @click="isPopup = false">取消</view>
            </view>
            <CityPicker :default-value="defaultValue" @confirm="cityConfirm" @cancel="visible = false"
                :visible="visible"></CityPicker>
        </u-popup>
    </view>
</template>
<script>
import { phoneReg, notificationFun } from "@/utils/PrjUtils";
import { sendAwardCode, doAwardExchange } from "@/improve/services";
import CityPicker from "@/improve/components/CityPicker/CityPicker.vue";
export default {
    name: "CashPrize",
    components: { CityPicker },
    data() {
        return {
            isPopup: false,
            form: {
                recipient: "",
                recipientPhone: "",
                recipientArea: "",
                recipientStreet: "",
            },
            isShowGetCode: true,
            phone: '',
            code: '',
            awardStudentUuid: '',
            awardWay: 1,
            timeData: {},
            visible: false,
            defaultValue: '110101', // ['北京市','北京市','东城区']
        };
    },
    methods: {
        // 提交奖品兑换
        async doAwardExchange() {
            const { awardStudentUuid, phone, awardWay, code } = this
            await doAwardExchange({ awardStudentUuid, phone, way: awardWay, code }, this.form)
            this.$refs.uToast.show({
                type: "success",
                message: "提交成功",
            });
            this.isPopup = false
        },
        cityConfirm(val) {
            this.form.recipientArea = `${val.provinceName} ${val.cityName} ${val.areaName}`
            this.visible = false
        },
        onGetCode() {
            const { phone, awardStudentUuid } = this;

            if (phone.length === 0) {
                return notificationFun('请输入手机号！');
            }
            if (phoneReg.test(phone)) {
                sendAwardCode({ phone, awardStudentUuid }).then(res => {
                    this.isShowGetCode = false;
                    notificationFun('发送成功请注意查收！');
                })
            } else {
                return notificationFun('请输入正确的手机号！');
            }
        },
        open(awardStudentUuid, awardWay) {
            console.log(awardStudentUuid, '3333')
            this.awardStudentUuid = awardStudentUuid;
            this.awardWay = awardWay
            this.isPopup = true;
        },
        confirm() {
            if (this.awardWay == 1) {
                if (!this.form.recipient) {
                    notificationFun('请填写收件人')
                    return;
                }
                if (!this.form.recipientPhone) {
                    notificationFun('请填写联系电话')
                    return;
                }
                if (!this.form.recipientArea) {
                    notificationFun('请填写所在地区')
                    return;
                }
                if (!this.form.recipientStreet) {
                    notificationFun('请填写详细地址')
                    return;
                }
            }
            if (!phoneReg.test(this.phone)) {
                notificationFun('请输入正确的手机号')
                return;
            }
            if (!this.code) {
                notificationFun('请输入验证码')
                return;
            }
            console.log(this.form);
            this.doAwardExchange()
        },
    },
};
</script>
<style scoped lang="scss">
.AddLoginConfigPopup {
    .title {
        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        height: 75px;
        line-height: 75px;
    }

    .borderBottom {
        border-bottom: 1px solid #eeeeee;
    }

    .content {
        .item {
            padding: 18px 22px;
            text-align: center;
            border-bottom: 1px solid #eeeeee;
            font-size: 14px;
            color: #000000;
        }

        .item-code {
            font-size: 14px;
            color: #37B874;
            margin-left: 10px;
        }

        .textarea-item {
            padding: 0 22px;
            padding-bottom: 15px;
        }

        textarea {
            background-color: #f9f9f9;
            border-radius: 10px;
            height: 44px;
            padding: 13px 16px;
            margin-left: 12px;
            width: calc(100% - 32px);
            margin-top: 9px;
            text-align: left;
            font-size: 16px;
            color: #333333;
        }

        .item-title {
            label {
                color: #f56c6c;
                margin-right: 4px;
                font-size: 18px;
            }

            text {
                color: #333333;
                font-size: 32rpx;
            }
        }

        .radio {
            width: 85px;
            text-align: left;
        }

        .list-item {
            padding: 10px 0px 10px 10px;

            >view {
                margin: 14px 0;
            }

            input {
                background-color: #f9f9f9;
                border-radius: 10px;
                height: 40px;
                padding-left: 10px;
                line-height: 40px;
                margin: 0 14px;
                font-size: 16px;
                color: #333333;
                text-align: left;
            }
        }
    }

    .btn {
        height: 74px;
        text-align: center;
        line-height: 74px;
        color: #000000;
        font-size: 14px;
    }

    .line {
        width: 100%;
        background-color: #f2f2f2;
        height: 6rpx;
    }
}
</style>
